import { useState } from "react";
import { Menu } from "antd";
import { NavLink, Outlet, useLocation } from "react-router-dom";
import { TransitionGroup, CSSTransition } from "react-transition-group";

import "../index.css";

const tabsData = [
  {
    label: <NavLink to={"/"}>Home</NavLink>,
    key: "home",
  },
  {
    label: <NavLink to={"/people"}>People</NavLink>,
    key: "people",
  },
  {
    label: <NavLink to={"/posts"}>Posts</NavLink>,
    key: "posts",
  },
];

const Root = () => {
  const [current, setCurrent] = useState("mail");
  const location = useLocation();

  const onClick = (e) => {
    setCurrent(e.key);
  };

  return (
    <>
      <Menu
        onClick={onClick}
        selectedKeys={[current]}
        mode="horizontal"
        items={tabsData}
      />
      <div className="wrapper">
        <TransitionGroup>
          <CSSTransition
            key={location.pathname}
            timeout={300}
            classNames="page"
            unmountOnExit
          >
            <Outlet />
          </CSSTransition>
        </TransitionGroup>
      </div>
    </>
  );
};

export default Root;
